import { fivThreeRegin } from '../microPalette/mockData/53ImageBase';
import { regInfos } from '../microPalette/mockData/regInfos';
import { reginIndexbase641 } from '../microPalette/mockData/reginIndexBase64';
import { DeBuggerView } from './styled';
function DeBugger() {
  return (
    <DeBuggerView>
      <div>
        <p>
          {`PreSegInfos[0].regionIndex`} 960* 960,
          每一个色块的颜色是唯一的，且只有一种颜色(内部每个像素点的rbga都是一样的)
          按行列的顺序排列像素点的r值（从左到右[决定数组每项的值]，从上到下[决定数组有多少项]）。
        </p>
        <p>
          画布上mousemove时根据鼠标相对于画布的位置(x:对应第几列，y:对应第几行)获取像素点的r值，从而判断鼠标是否在当前色块内。
        </p>
        <img className="image1" src={reginIndexbase641} alt="" />
      </div>
      <div className="regInfo-list">
        {regInfos.map((item, index) => {
          return (
            <div className="list-item" key={index}>
              <div className="item-text">{item.index}</div>
              <img className="item-image" src={item.region} alt="" />
            </div>
          );
        })}
      </div>
      <div style={{ marginTop: '30px' }}>
        <p>
          根据当前色块的r值找到microPalette/mockData/regInfos中
          对应项的灰度图(index===53项.region)
        </p>
        <p>
          灰度图(960*960)只有黑白两种颜色使用imagData把白色换成蓝色并渲染到canvas上{' '}
        </p>
        <img src={fivThreeRegin} alt="" />
      </div>
      <div style={{ marginTop: '30px' }}>
        <p style={{ color: 'rgba(77, 130, 255, 0.6)' }}>
          自动加选hover 颜色: r: 77, g: 130, b: 255, a: 0.6
        </p>
      </div>
    </DeBuggerView>
  );
}

export default DeBugger;
